import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { updateTypeAction } from "../store/action";

export default function Footer() {
  const type = useSelector((state) => state.type);
  const dispatch = useDispatch();

  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>1</strong> 剩余
      </span>
      <ul className="filters">
        <li>
          <a
            onClick={() => dispatch(updateTypeAction("all"))}
            className={type === "all" ? "selected" : ""}
            href="#/"
          >
            全部
          </a>
        </li>
        <li>
          <a
            onClick={() => dispatch(updateTypeAction("active"))}
            className={type === "active" ? "selected" : ""}
            href="#/active"
          >
            未完成
          </a>
        </li>
        <li>
          <a
            onClick={() => dispatch(updateTypeAction("completed"))}
            className={type === "completed" ? "selected" : ""}
            href="#/completed"
          >
            已完成
          </a>
        </li>
      </ul>
      <button className="clear-completed">清除已完成</button>
    </footer>
  );
}
